<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>阴阳八卦图</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 800px;
			height: 800px;
			margin: 50px auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.yinyang {
			width: 600px;
			height: 600px;
			background: #fff;
			box-sizing: border-box;
			border-color: #000;
			border-style: solid;
			border-width: 10px 10px 300px 10px;
			border-radius: 100%;
			position: absolute;
			z-index: 10;
			transform: scale(0.65);
			animation: yinyangRotate 10s infinite linear;
		}

		.yinyang::before {
			content: "";
			width: 290px;
			height: 290px;
			background: #fff;
			box-sizing: border-box;
			border-radius: 100%;
			border: 110px solid #000;
			position: absolute;
			left: 0;
			top: 100%;
			transform: translate(0, -50%);
		}

		.yinyang::after {
			content: "";
			width: 290px;
			height: 290px;
			background: #000;
			box-sizing: border-box;
			border-radius: 100%;
			border: 110px solid #fff;
			position: absolute;
			right: 0;
			top: 100%;
			transform: translate(0, -50%);
		}

		@keyframes yinyangRotate {
			from {
				transform: scale(0.65) rotate(0deg);
			}

			to {
				transform: scale(0.65) rotate(360deg);
			}
		}

		.bg-black {
			width: 600px;
			height: 200px;
			background: #000000;
			position: relative;
		}

		.bg-black::before {
			content: "";
			width: 220px;
			border-left: 190px solid transparent;
			border-right: 190px solid transparent;
			border-bottom: 200px solid #000;
			position: absolute;
			left: 0;
			top: -200px;
		}

		.bg-black::after {
			content: "";
			width: 220px;
			border-left: 190px solid transparent;
			border-right: 190px solid transparent;
			border-top: 200px solid #000;
			position: absolute;
			left: 0;
			bottom: -200px;
		}

		.bg-white {
			width: 570px;
			height: 190px;
			background: #fff;
			position: absolute;
		}

		.bg-white::before {
			content: "";
			width: 210px;
			border-left: 180px solid transparent;
			border-right: 180px solid transparent;
			border-bottom: 190px solid #fff;
			position: absolute;
			left: 0;
			top: -190px;
		}

		.bg-white::after {
			content: "";
			width: 210px;
			border-left: 180px solid transparent;
			border-right: 180px solid transparent;
			border-top: 190px solid #fff;
			position: absolute;
			left: 0;
			bottom: -190px;
		}

		.side {
			width: 100px;
			height: 100px;
			position: absolute;
			z-index: 9;
		}

		.side:nth-child(1) {
			transform: rotate(0deg) translateY(-280px);
		}

		.side:nth-child(2) {
			transform: rotate(45deg) translateY(-270px);
		}

		.side:nth-child(3) {
			transform: rotate(90deg) translateY(-280px);
		}

		.side:nth-child(4) {
			transform: rotate(135deg) translateY(-270px);
		}

		.side:nth-child(5) {
			transform: rotate(180deg) translateY(-280px);
		}

		.side:nth-child(6) {
			transform: rotate(225deg) translateY(-270px);
		}

		.side:nth-child(7) {
			transform: rotate(270deg) translateY(-280px);
		}

		.side:nth-child(8) {
			transform: rotate(315deg) translateY(-270px);
		}

		.line {
			box-sizing: border-box;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-top: 10px solid #000;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
		}

		.line:nth-child(1) {
			width: 50px;
			bottom: 0;
		}

		.line:nth-child(2) {
			width: 70px;
			bottom: 15px;
		}

		.line:nth-child(3) {
			width: 90px;
			bottom: 30px;
		}

		.split-line::before {
			content: "";
			width: 8px;
			height: 12px;
			display: block;
			background: #fff;
			position: absolute;
			left: 50%;
			margin-left: -4px;
			top: -12px;
		}
	</style>
	<body>

		<div class="box">

			<div class="side">
				<div class="line"></div>
				<div class="line split-line"></div>
				<div class="line"></div>
			</div>
			<div class="side">
				<div class="line split-line"></div>
				<div class="line split-line"></div>
				<div class="line split-line"></div>
			</div>
			<div class="side">
				<div class="line split-line"></div>
				<div class="line split-line"></div>
				<div class="line"></div>
			</div>
			<div class="side">
				<div class="line"></div>
				<div class="line"></div>
				<div class="line split-line"></div>
			</div>
			<div class="side">
				<div class="line split-line"></div>
				<div class="line"></div>
				<div class="line split-line"></div>
			</div>
			<div class="side">
				<div class="line"></div>
				<div class="line split-line"></div>
				<div class="line split-line"></div>
			</div>
			<div class="side">
				<div class="line split-line"></div>
				<div class="line"></div>
				<div class="line"></div>
			</div>
			<div class="side">
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
			</div>

			<div class="yinyang"></div>

			<div class="bg-black"></div>
			<div class="bg-white"></div>
		</div>

	</body>

</html>
